<template>
	<div class="container">
		<!--对话和购物车-->
		<div class="header">
			<router-link to="dialogue">
				<span></span>
			</router-link>
			<router-link to="cart">
				<i class="fa fa-shopping-cart" aria-hidden="true" ></i>
			</router-link>
		</div>
		<div class="banner" v-for="(i,index) in hotpicData" v-if="index<1">
			<img v-lazy="i.image"/>
		</div>
		
			<div class="pinpai" >
				<div v-for="(i,index) in hotpicData" v-if="index>0" @click="qingqiu(i.target,index)">
					<router-link :to="{path:'goodsms',params:{ itemId:i.target }}" >
						<img v-lazy="i.image"/>
					</router-link>
				</div>
			
			<!--<div>
				<img src="../../assets/images/superpic1.jpg" alt="" />
			</div>-->
			</div>
		<div class="super_more">
			<img src="../../assets/images/super_more.png"/>
		</div>
		<!--null-->
		<div id="null"></div>
		<v-footer></v-footer>
	</div>
</template>

<script>
	import vFooter from "../footer/footer";
	export default{
		data(){
			return {
				hotpicData:[]
			}
		},
		methods:{
			request(){
				this.$http({
					url:'http://m.zhai.me/super/api/v3/store/dynamicHome',
					method:'GET'
				}).then(function(req){
//					console.log(req);
					this.hotpicData = req.data.data.contents;
				})
			},
			qingqiu(num,index){
				this.$http({
					url:'http://m.zhai.me/super/api/v3/item/subItems',				
					 params:{
					 	itemId:num
					 },
					 method:'get'
				}).then(function(req){
					//console.log(req);
					this.$store.state.data.data = req.data.data.resultList[0];
//					console.log(this.$store.state.data.data)
				});
				this.$http({
					url:"http://m.zhai.me/super/api/v3/image/itemsBanner",
					params:{
						itemId : this.hotpicData[index].target
					},
					method:'get'
				}).then(function(req){
					this.$store.state.data.img = req.body.data.resultList;
				});
			}			
		},
		mounted(){
			this.request();
		},
		components:{
			vFooter
		}
	}
</script>
<style scoped="scoped">
	.container{
		background-color:#f4f4f4;
		position: absolute;
		width:100%;
		min-height: 100%;
	}
	.header{
		display: flex;
		justify-content: space-between;
		position: fixed;
		top:0;
		left:0;
		right:0;
	}
	.header span{
		width:0.512972rem;
		height:0.864864rem;
		display: inline-block;
		margin:0.378378rem 0.37027rem;
		background: url(../../assets/images/superui4.png) -642px 0 no-repeat;
	}
	.header i{
		color:#fc2b64;
		font-size:0.54054rem;
		padding-right:0.235135rem;
		position: relative;
		bottom:0.081081rem;
		margin:0.378378rem 0.37027rem;
	}
	.header img{
		position: absolute;
		z-index:-1;
	}
	.pinpai{
		display:flex;
		justify-content:space-between;
		padding: 0 0.27027rem;
		flex-wrap: wrap;
	}
	.banner img{
		width:100%;
	}
	.pinpai div{
		width:49%;
		padding-top:0.243243rem;
	}
	.pinpai div img{
		width:4.629729rem;
		width:100%;
	}
	
	.super_more {
		margin-top:0.162162rem;
		display:flex;
		justify-content: center;
	}
	#null{
		height:130px;
	}
</style>